
<template>
  <el-container style="max-height: 100vh;min-width: 97vw;overflow: hidden;">
    <Aside @changePage="changePage" :collapse="asideSettings.isCollapse" :width="asideSettings.width"></Aside>
    <el-container style="height: 100vh;width:100%;display: flex;flex-direction: column;">
      <AdminHeader :isCollapse="asideSettings.isCollapse"  @changeAside="changeAside" @changePage="changePage"/>
      <el-main class="index-main">
        <div>
         <el-card>
            <iframe :src="iframeURL" width="100%" style="min-height: 85vh">
                
            </iframe>
         </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import AdminHeader from '@/components/AdminHeader.vue';
  import Aside from '@/components/Aside.vue';


// 添加消息监听器
const handleMessage = (event: MessageEvent) => {
  const message = event.data;
  if (message && message.action === 'changePage') {
    iframeURL.value = message.url;
  }
};

// 挂载时添加监听器
onMounted(() => {
  // 添加监听器
  window.addEventListener('message', handleMessage);
});

onUnmounted(() => {
  // 卸载时移除监听器，避免内存泄漏
  window.removeEventListener('message', handleMessage);
});

  // 定义asideSettings的类型
  interface AsideSettings {
    isCollapse: boolean;
    width: string;
  }

  // 组件状态使用ref定义并添加类型
  const asideSettings = ref<AsideSettings>({
    isCollapse: false,
    width: '200',
  });

  // 定义changeAside函数类型
  const changeAside = (): void => {
    asideSettings.value.isCollapse = !asideSettings.value.isCollapse;
    asideSettings.value.width = asideSettings.value.isCollapse ? "64" : "200";
  };

  // 页面路径，这里可以根据实际情况定义URL的类型
  const iframeURL = ref<string>('/#/user/list');

  // 处理侧边栏发送的页面变更事件，假设newURL是字符串类型
  const changePage = (newURL: string): void => {
    iframeURL.value = newURL;
  };
</script>

<style>
body{
  background-color: #eee;
  margin: 0px;
  padding: 0px;
  overflow: auto;
}

/* 主页面样式 */
.index-main {
  width: 100%;
  padding: 0;
  height: 100vh;
  overflow-x: hidden;
}
</style>
